<template>
    <div class="touzilist">
      <el-card>
        <el-row :gutter="10" class="elrow">
        <el-col :span="4">
          <el-select placeholder="请选择" v-model="formData.value" clearable>
            <el-option label="检索类型" value="0" disabled></el-option>
            <el-option label="姓名" value="1"></el-option>
            <el-option label="身份证号" value="2"></el-option>
            <el-option label="联系方式" value="3"></el-option>
            <el-option label="邮箱" value="4"></el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-input placeholder="请输入检索信息" v-model="formData.input" maxlength="18"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" v-on:click="getTabsList">搜索</el-button>
        </el-col>
      </el-row>
        <el-row>
          <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%"
                    stripe
                    border>
            <el-table-column type="index" :index="indexMethod" label="#"></el-table-column>
            <el-table-column label="姓名" align="center" width="50">
              <template slot-scope="scope">
                <span>{{ scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="头像" align="center" width="180">
              <template slot-scope="scope">
                <el-image
                  class="table-td-thumb"
                  style="width: 100px; height: 100px"
                  :src="scope.row.head"
                  :preview-src-list="[scope.row.head]"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="性别" align="center" width="50">
              <template slot-scope="scope">
                <span style="color:rgb(204,0,51)">{{ scope.row.sex}}</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center" width="180">
              <template slot-scope="scope">
                <span style="color:rgb(0, 208, 83)">{{scope.row.tele}}</span>
              </template>
            </el-table-column>
            <el-table-column label="身份证号" align="center" width="180">
              <template slot-scope="scope">
            <span>
              <el-tag size="medium">{{ scope.row.sfz}}</el-tag>
            </span>
              </template>
            </el-table-column>
            <el-table-column label="学历" align="center" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.xl}}</span>
              </template>
            </el-table-column>
            <el-table-column label="报考意向" align="center" width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.intention}}</span>
              </template>
            </el-table-column>
            <el-table-column label="地址" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.address}}</span>
              </template>
            </el-table-column>
            <el-table-column label="邮箱" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.email}}</span>
              </template>
            </el-table-column>
            <el-table-column label="介绍">
              <template slot-scope="scope">
                <span>{{ scope.row.intro}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div style="text-align: center;margin-top: 30px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pagesize"
            :total="total"
            :current-page="currentPage"
            @current-change="current_change">
          </el-pagination>
        </div>
      </el-card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        formData:{
          input: '',
          value: '0'
        },
        total: 0,
        pagesize: 2,
        currentPage:1
      };
    },
    methods: {
      current_change(val){
        this.currentPage = val;
        console.log(val);
        console.log(this.currentPage);
        //this.getTabsList(this.currentPage,this.pagesize);
        // console.log(this.tableData);
      },
      indexMethod(index){
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      getTabsList() {
        console.log();
        this.$axios
          .get("/queryStudent", {
            params:{
              input: this.formData.input,
              value: this.formData.value
            }
          })
          .then(res => {
            //			console.log(res)
            const data = res.data;
            this.tableData = data.data;
            this.total = res.data.data.length;
            //   console.log(this.tableData)
          })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    },
    mounted() {
      this.getTabsList();
    }
  };
</script>

<style scoped>
  .touzilist {
    margin: 10px;
  }
  .elrow{
    margin-bottom: 20px;
  }
</style>
